<template>
  <el-dialog
    title="参数配置"
    :visible.sync="paramsDialogShow"
    width="30%"
    :before-close="closeDialog"
  >
    <!-- <div @click="handler">点击</div> -->
    <el-table :data="params" style="width: 100%" height="400">
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <el-table-column prop="paramsKey" label="参数名称">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.paramsKey"
            placeholder="请输入参数名称"
            v-show="!scope.row.isKeyShow"
            @blur="scope.row.isKeyShow = true"
          ></el-input>
          <span v-show="scope.row.isKeyShow">{{ scope.row.paramsKey }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="paramsValue" label="参数值">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.paramsValue"
            placeholder="请输入参数值"
            v-show="!scope.row.isValueShow"
            @blur="scope.row.isValueShow = true"
          ></el-input>
          <span v-show="scope.row.isValueShow">{{
            scope.row.paramsValue
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编辑" width="50px">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="编辑" placement="right">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="
                (scope.row.isKeyShow = false), (scope.row.isValueShow = false)
              "
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-button icon="el-icon-circle-plus-outline" type="text" @click="addParams"
      >添加参数</el-button
    >
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="closeDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["paramsDialogShow", "params"],
  data() {
    return {
      // tableData: this.params,
      tableData: [
        {
          paramsKey: "key1",
          isKeyShow: true,
          paramsValue: "value1",
          isValueShow: true,
        },
        {
          paramsKey: "key1",
          isKeyShow: true,
          paramsValue: "value1",
          isValueShow: true,
        },
        {
          paramsKey: "key1",
          isKeyShow: true,
          paramsValue: "value1",
          isValueShow: true,
        },
        {
          paramsKey: "key1",
          isKeyShow: true,
          paramsValue: "value1",
          isValueShow: true,
        },
      ],
    };
  },
  // watch: {
  //   params(newVal) {
  //     this.tableData = newVal;
  //     console.log(this.tableData);
  //   },
  // },
  methods: {
    handler() {
      // console.log(this.paramsDialogShow);
      console.log(this.params);
    },
    closeDialog() {
      this.$emit("closeDialog");
    },
    addParams() {
      this.$emit("addParams");
    },
  },
};
</script>

<style>
</style>